<template>
  <div class="car-list">
    <div
      class="list"
      v-for="(item,index) in newArray"
      :key="index"
    >
      <ul>
        <li class="top">
          <!-- <input
            type="checkbox"
            v-model="item[0].checked"
          > -->
          <img
            class="sjname"
            src="../../../image/sjname.png"
          >
          <span class="top-span">{{item[0].name}}</span>
          <img
            class="jinru"
            src="../../../image/jinru.png"
          >
          <span
            class="lj"
            v-show="item[0].isLingjuan"
          >领卷</span>
        </li>
        </p>
        <li
          class="bottom"
          v-for="(item2,index2) in item"
          :key="index2"
        >
          <input
            type="checkbox"
            v-model="item2.checked"
          >
          <img
            class="sp"
            src="../../../image/sp.jpg"
          >
          <h2 class="box">
            <p class="detail">{{ item2.detail }}</p>
            <p class="price">
              <span class="left-span">{{ item2.title }}</span>
              <span class="center-span">￥{{ item2.price }}&nbsp;&nbsp;
                <span class="right-span">×{{ item2.number }}</span>
              </span>
            </p>
          </h2>
        </li>
      </ul>
    </div>
    <div class="all">
      <input
        id="all"
        type="checkbox"
        v-model="allChecked"
      >
      <label
        class="all-label"
        for="all"
      >全选</label>
      <span class="count">合计：￥{{count}}</span>
      <span class="btn">结算</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'car-list',
  props: {
    carList: {
      type: Array,
      default: _ => []
    }
  },
  computed: {
    newArray () {
      let list = this.carList,
        flag = 0,
        data = [],
        wdy = [];
      for (let i = 0; i < list.length; i++) {
        let az = '';
        for (let j = 0; j < data.length; j++) {
          if (data[j][0].name == list[i].name) {
            flag = 1;
            az = j;
            break;
          }
        }
        if (flag == 1) {
          data[az].push(list[i]);
          flag = 0;
        } else if (flag == 0) {
          wdy = new Array();
          wdy.push(list[i]);
          data.push(wdy);
        }
      }
      return data
    },
    allChecked: {
      get () {
        return !this.carList.find(item => !item.checked)
      },
      set (val) {
        this.carList.forEach((item) => {
          if (val === false) {
            item.checked = 0
          } else {
            item.checked = 1
          }
        })
      }
    },
    count () {
      let count = 0
      this.carList.forEach(item => {
        item.checked && (count += item.price * item.number)
      });
      return count
    }
  }
}
</script>

<style scoped>
.btn {
  display: block;
  width: 109px;
  height: 41px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(103, 101, 101, 100);
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  line-height: 41px;
  text-align: center;
}

.count {
  flex: 2;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  text-align: right;
  margin-right: 10px;
}

.all-label {
  color: rgba(103, 101, 101, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-left: 5px;
}

.all {
  width: 100%;
  height: 62px;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 29px;
  padding-right: 13px;
  border-top: 1px solid rgba(239, 239, 239, 100);
}

.lj {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(251, 93, 99, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.box {
  margin-left: 16px;
}

.center-span {
  display: flex;
  align-items: center;
}

.right-span {
  display: block;
  /* width: 6vw; */
  height: 6vw;
  line-height: 20px;
  border-radius: 10px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 100);
  text-align: center;
  line-height: 6vw;
  border: 1px solid #eee;
  padding: 1px 5px;
}

.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  box-sizing: border-box;
}

h2 .left-span {
  display: block;
  width: 28vw;
  height: 14px;
  color: rgba(132, 130, 130, 100);
  font-size: 12px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  background-color: #eeeeee;
  border-radius: 10px;
  text-align: center;
  line-height: 14px;
  padding: 5px;
}

h2 {
  font-weight: normal;
}

.detail {
  width: 65vw;
  height: 32px;
  color: rgba(34, 34, 34, 100);
  font-size: 12px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.bottom {
  height: 70px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8px;
  margin: 16px 0;
}

.sp {
  width: 14.5vw;
  height: 14.5vw;
  margin-left: 5px;
}

.top-span {
  margin-left: 5px;
}

.jinru {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}

.sjname {
  width: 19px;
  height: 19px;
  margin-left: 5px;
  color: rgba(34, 34, 34, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.top {
  height: 44px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
  border-bottom: 1px solid #f7f7f7;
  position: relative;
}

ul,
li {
  width: 100%;
}

.list {
  width: 94%;
  margin: 20px auto;
  border-radius: 8px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  font-family: Arial;
  border: 1px solid rgba(219, 219, 219, 76);
  overflow: hidden;
}

input[type="checkbox"]:checked {
  background: url("../../../image/dg.png") no-repeat center;
  background-size: 14px 14px;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
  border: 1px solid #505051;
  outline: none;
  border-radius: 14px;
}

.car-list {
  padding-bottom: 59px;
  box-sizing: border-box;
}
</style>